<template>
   <div class="browseAndFavorite-component">
        <div class="item6">
           <div class="title">
               <h1>
                   最近瀏覽
               </h1>
           </div>
           <div class="box">
               <ul>
                   <li :key="index" v-for="(item,index) in items">
                       <a  @click="goBrowse(item)">
                           <img :src="item.cover">
                           <p>
                                {{item.post_title}}
                                
                           </p>
                           <p>
                                
                               面積：{{item.post_acreage}}尺
                           </p>
                           <p>
                               
                               價格：{{item.post_sell}}
                                
                           </p>
                       </a>
                       
                   </li>
               </ul>
           </div>
       </div>
       <div class="item6">
           <div class="title">
               <h1>
                   我的最愛
               </h1>
           </div>
           <div class="box">
               <ul>
                   <li :key="index" v-for="(faves,index) in faves">
                        <a @click="goFaves(faves)">
                           <img :src="faves.cover">
                           <p>
                                {{faves.post_title}}
                                
                           </p>
                           <p>
                                
                               面積：{{faves.post_acreage}}
                           </p>
                           <p>
                               
                               價格：{{faves.post_sell}}       
                           </p>
                         </a >
                   </li>
               </ul>
           </div>
       </div>
       
    </div>
   </div>
</template>

<script>
import { mapState } from "vuex"
import { V1_GET_SPACE, V1_COLLECTLIST } from "@/config/api"
export default {
    props:{
        // 'collectType':Number,
    },
    data(){
        return{
            id:this.$route.query.id,
            browse1:[],
            browse2:[],
            browse3:[],
            browse4:[],
            browse5:[],
            "itemsId":{},
            "items":[],
            "faves":[],
            // "collectType":[]
        }
    },
    computed:{
         ...mapState({
            "userProfile":state=>state.app.userProfile,
           
        }),
    },
    activated(){ 
        if(this.$route.query.id!=this.id){
            this.getFaves();
            this.id=this.$route.query.id;
        }
         
    },  
    watch:{
        // getFaves:()=>{
        //    getFaves();

        // },
    },
    methods:{
        goFaves(faves){
            //跳到空页面再
            this.$router.replace('/back?id='+faves.id);
            this.$router.go(0);
            // this.$router.replace('/user/back');
            // this.$router.push({
            //     path:'//back',
            //     query:{
            //         id:faves.id

            //     }
            // })

        },
        goBrowse(item){
             this.$router.replace('/back?id='+item.id)
        },
        getBrowse(){
            this.itemsId=JSON.parse(localStorage.space);
            this.itemsId.data.map((id,index) => {
                this.$http.get(V1_GET_SPACE+id,{
                }).then(res => {
                    if(res.data.success) {
                            this.items.push(
                                {   cover:res.data.infor[0].cover,
                                    post_title:res.data.infor[0].post_title,
                                    post_acreage:res.data.infor[0].post_acreage,
                                    post_sell:res.data.infor[0].post_sell,
                                    id:res.data.infor[0].id
                                });
                    }else{

                    }
                });
            });
        },
        getFaves(){
            this.$http.post(V1_COLLECTLIST,{
                "token":this.userProfile.token,
                "uid":this.userProfile.id
            }).then(res => {
                if(res.data.success) {
                    this.faves=res.data.infor;
                }else{

                }
            });
        }
    },
    mounted(){
        this.getBrowse();
        this.getFaves();
    },
}
</script>

<style lang="scss">
    @import "../style/base/_base";
    .browseAndFavorite-component{
        margin-bottom: 80px;
       .item6{
            margin-top: 40px;
            .box{
                background: #fff;
            }
            ul{
                @include flex;
                li{
                    // height:231px;
                    a{
                        img{
                            width: 200px;
                            height:150px;
                            margin-right: 40px;
                            margin-bottom: 20px;
                        }
                        p{
                            margin-top: 5px;
                            text-indent: 14px;
                        }
                    }
                    
                }
            }
        }
    }
</style>